<!-- 个人中心 -->
<template>
	<view>
		<view class="ti">店铺优惠券仅限特定店铺使用，不能赠送别人。</view>
		<view style="margin-left: 24rpx;margin-right: 24rpx;">
			<view class="item" v-for="item in mibaoList" :key="item.id">
				<view style="display: flex;">
					<view>
						<view style="display: flex;">
							<view class="jin">￥</view>
							<view class="qian">{{item.amount.split('.')[0]}}</view>
						</view>
						<view class="yong">{{item.enough_text}}</view>
					</view>
					<view style="margin-left: 33px;">
						<view class="name">{{item.name}}</view>
						<view class="dian">{{item.shop_name}}</view>
						<view class="yxq">有效期截止：{{item.expire_text}}</view>
					</view>
				</view>
				<view class="image-shixiao" v-if="item.is_linqi">
					<image style="width: 116rpx;height: 68rpx;" src="../../static/images/shixiao.png"></image>
				</view>
				<view style="display: flex;position: relative;">
					<view class="fw">适用范围：{{item.shop_name}}</view>
					<view class="btn" @click="toshangjia(item)">
						<view class="qsy">去使用</view>
					</view>
				</view>
			</view>
		</view>
    <!-- 空置页 -->
    <shopro-empty v-if="isEmpty" marginTop="200rpx" :image="$IMG_URL + '/imgs/empty/no_data.png'" tipText="暂无米包">
    </shopro-empty>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				page: 1,
				mibaoList: [],
        isEmpty:false,
			};
		},
		onLoad() {},
		onShow() {
			this.mibaoList = []
			this.page = 1
			this.init()
		},
		onReachBottom() {
			console.log('已触底');
			this.page++
			this.init()
		},
		methods: {
			init() {
				let data = {
					page: this.page
				}
				this.$https('my.mibao', data).then(res => {
					let datalist = res.data.data
					this.mibaoList = [...this.mibaoList, ...datalist]
          this.isEmpty = !this.mibaoList.length;
				})
			},
			// 去使用米包券
			toshangjia(item) {
				this.$Router.push({
					path: '/pages/index/GoodsDetails',
					query: {
						id: item.store_shop_id
					}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background: #ffffff !important;
	}

	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;

	}

	.personal-wrap {
		padding-bottom: 100rpx;
	}

	.br {
		border: 1px solid #F3F3F3;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}

	.ti {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FE811C;
		line-height: 48rpx;
		margin-top: 24rpx;
		margin-left: 24rpx;
	}

	.item {
		width: 702rpx;
		height: 300rpx;
		background: url('../../static/images/Group 2435.png');
		margin-top: 24rpx;
		position: relative;
	}
	.image-shixiao{
		position: absolute;
		top: 0rpx;
		right: 0rpx;
	}

	.btn {
		width: 132rpx;
		height: 64rpx;
		background: #FC5351;
		border-radius: 8px 8px 8px 8px;
		opacity: 1;
		color: #FFFFFF;
		position: absolute;
		right: 20rpx;
		top: 45rpx;
	}

	.jin {
		// width: 36rpx;
		// height: 50rpx;
		// font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FC5351;
		line-height: 42rpx;
		margin-left: 20rpx;
		margin-top: 68rpx;
	}

	.qian {
		// width: 92rpx;
		height: 106rpx;
		font-size: 56rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FC5351;
		line-height: 90rpx;
		margin-top: 33rpx;
	}

	.name {
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FC5351;
		line-height: 42rpx;
		margin-top: 24rpx;
	}

	.dian {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 28rpx;
		margin-top: 20rpx;
	}

	.yxq {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 28rpx;
		margin-top: 20rpx;
	}

	.fw {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-top: 60rpx;
		margin-left: 24rpx;
	}

	.yong {
		// margin: 0 auto;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FC5351;
		line-height: 28rpx;
		margin-left: 44rpx;
		text-align: center;
	}

	.qsy {
		text-align: center;
		margin-top: 10rpx;
	}
</style>
